<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
        ul,li{
            list-style: none;
        }
        .banner{
            width: 600px;
            height: 350px;
            border: 10px solid #000;
            position: absolute;
            left: 0;right: 0;top: 0;bottom: 0;
            margin: auto;
            /* overflow: hidden; */
        }
        .banner .picbox{
            width: 4800px;
            position: absolute;
            left: -600px;
        }
        .banner .picbox .pic{
            float: left;
            width: 600px;
            height: 350px;
        }
        .banner .picbox .pic img{
            width: 100%;
            height: 350px;
        }
        .banner .spanbox{
            position: absolute;
            right: 50%;
            transform: translateX(50%);
            bottom: 10px;
        }
        .banner .spanbox li{
            float: left;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(33, 8, 8, .8);
            margin-right: 10px;
            cursor: pointer;
            user-select: none;
        }
        .banner .spanbox .active{
            background: #58bc58;
        }
        .banner .switchbox{
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .banner .switchbox li{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(33, 8, 8, .31);
            cursor: pointer;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            user-select: none;
        }
        .banner .switchbox .leftbtn{
            float: left;
        }
        .banner .switchbox .rightbtn{
            float: right;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图片列表 -->
        <ul class="picbox">
            <!-- <li class="pic"><img src="./img/article_1.jpg" alt=""></li>
            <li class="pic"><img src="./img/article_2.jpg" alt=""></li>
            <li class="pic"><img src="./img/article_3.jpg" alt=""></li>
            <li class="pic"><img src="./img/article_4.jpg" alt=""></li>
            <li class="pic"><img src="./img/article_5.jpg" alt=""></li>
            <li class="pic"><img src="./img/article_6.jpg" alt=""></li> -->
        </ul>
        <!-- 按钮列表 -->
        <ul class="spanbox">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <!-- 左右按钮 -->
        <ul class="switchbox">
            <li class="leftbtn"> < </li>
            <li class="rightbtn"> > </li>
        </ul>
    </div>
    
    <script src="./js/move.js"></script>
    <script src="./js/data.js"></script>
    <script>
        /* 
            实现功能：
                1、图片列表自动向左移动轮播
                2、伴随高亮
                3、鼠标滑入滑出控制轮播
                4、左右按钮控制轮播
                5、按钮列表控制轮播
            注意点：
                * 确定初始索引和初始定位
                * 移动到图片列表末尾拼接的第一张时，重置索引值和定位
                * 移动到图片列表开头拼接的最后一张时，重置索引值和定位
        */

        // 获取元素
        let banner = document.querySelector('.banner'); 
        let picBox = document.querySelector('.picbox'); 
        let spanBox = document.querySelector('.spanbox');
        let leftBtn = document.querySelector('.leftbtn');
        let rightBtn = document.querySelector('.rightbtn');
        

        // 1. 图片列表
        picBox.innerHTML = picdata.map(({idx,imgurl})=>{
            // 返回的数据以数组形式展现，故join方法转字符串
            return `<li class="pic" idx='${idx}'><img src="${imgurl}" alt=""></li>`
        }).join('');
    
        // 获取宽度
        let picWidth = parseInt(window.getComputedStyle(picBox.firstElementChild).width);

        // 2. 按钮列表
        picdata.forEach((item,index)=>{
            index===0?spanBox.innerHTML += `<li class='active'></li>`:spanBox.innerHTML += `<li></li>`;
        });

        // 克隆第一张图片并插入到末尾
        let cloneFirst = picBox.firstElementChild.cloneNode(true);
        picBox.appendChild(cloneFirst);
        // 克隆最后一张图片并插入到开头
        let cloneLast = picBox.lastElementChild.previousElementSibling.cloneNode(true);
        picBox.insertBefore(cloneLast,picBox.firstElementChild);
        
        // 获取按钮列表
        let spanlist = spanBox.querySelectorAll('li');

        // 3. 图片走动跟随高亮
        let timer;
        let idx = 0;    // 默认第一个高亮
        autoPlay();     // 轮播
        let flag = true;       // 左右按钮控制开关
        
        // 4. 鼠标控制轮播
        // 滑入
        banner.onmouseover = () =>{
            clearInterval(timer)
        }
        // 滑出
        banner.onmouseout = () =>{
            autoPlay();
        }

        // 5. 左右按钮控制轮播
        // 右按钮
        rightBtn.onclick = () => {

            // 为放置点击太快导致移动失效，设置开关
            if(flag){
                flag = !flag;   // 关闭开关
                // 索引+1，控制高亮，图片移动
                idx++;
                activeShow();
                move(picBox,{left:-picWidth*(idx+1)},()=>{
                    flag = !flag;   // 移动完成后才开启开关
                    if(idx===spanlist.length){
                        idx = 0;
                        picBox.style.left = picWidth*-1 + 'px';
                    }
                });
            }
        }
        // 左按钮
        leftBtn.onclick = () =>{
            if(flag){
                flag = !flag;   // 关闭开关
                // 索引-1，控制高亮，图片移动
                idx--;
                activeShow();
                move(picBox,{left:-picWidth*(idx+1)},()=>{
                    flag = !flag;
                    if(idx === -1){
                        idx = 5;
                        picBox.style.left = -(picWidth*(idx+1)) + 'px';
                    }
                });
            }
        }

        // 6.点击按钮列表控制轮播
        for(let i=0;i<spanlist.length;i++){
            spanlist[i].onclick = () =>{
                idx = i;
                activeShow();
                move(picBox,{left:-picWidth*(idx+1)});
            }
        }



        // 轮播封装
        function autoPlay(){
            timer = setInterval(()=>{
                idx++;
                
                // 高亮
                activeShow();

                // 图片移动
                move(picBox,{left:-picWidth*(idx+1)},()=>{
                    // 当轮到克隆的最后一张idx为6时，更改idx为0并立刻重置到开头第二张
                    if(idx===spanlist.length){
                        idx = 0;
                        picBox.style.left = picWidth*-1 + 'px';
                    }
                });
            },2500);
        }

        // 高亮封装
        function activeShow(){
            for(let i=0;i<spanlist.length;i++){
                spanlist[i].className = '';
            }
            // 当轮到克隆的最后一张idx为6时，高亮给第一个按钮
            if(idx === spanlist.length){
                spanlist[0].className = 'active';
            }
            // 当轮到克隆的第一张idx为-1时，高亮给第六个按钮
            else if(idx === -1){
                spanlist[5].className = 'active';
            }else{
                spanlist[idx].className = 'active';
            }
        }
    </script>
</body>
</html>